Skip to main content

Custom FAB Icons

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Swap an icon​

Give your icon the slot of the button you want to change. See the list of FAB icon slots.

Result
Loading...
Live Editor
<cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP">
  <svg slot="view-in-ar-icon" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
  </svg>
</cylindo-viewer>

Change the icon size​

Icons are 24px by default. Use the --fab-icon-size CSS variable to change it.

Result
Loading...
Live Editor
<div className="smaller-icon">
  {/* For the purpose of the example, we are scoping the styles in the div element. */}
  <style>
    {`
      .smaller-icon cylindo-viewer {
        --fab-icon-size: 16px;
      }


      .smaller-icon ::part(fab) {
        height: 24px;
        width: 24px;
        min-width: 24px;
        border-radius: 8px;
        color: #547ebb;
      }

      .smaller-icon ::part(view-in-ar) {
        height: 24px;
        width: auto;
      }

      .smaller-icon ::part(qr-fab) {
        height: 24px;
        width: 24px;
        min-width: 24px;
        border-radius: 8px;
        color: #547ebb;
      }
    `}
  </style>
  <cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP">
    <svg slot="view-in-ar-icon" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
    </svg>
  </cylindo-viewer>
</div>